// 新增房型
<template>
  <div class="roomUpdate">
    <Breadcrumb :pathContent="content" />
    <el-form>
      <el-form-item>
        <div class="roomUpdate-content">
          <el-tabs v-model="activeName">
            <el-tab-pane label="基础信息" name="first" :disabled="!isClick('first')"><RoomInfo :hotelName="hotelName" :hotelEnName="hotelEnName" v-model="activeName"/></el-tab-pane>
            <el-tab-pane label="基础设施" name="second" :disabled="!isClick('second')">
              <RoomFacilities  v-model="activeName"/>
            </el-tab-pane>
            <el-tab-pane label="房型图片" name="third" :disabled="!isClick('third')">
              <RoomPicture v-if="activeName === 'third'"/>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import RoomPicture from '@/components/room/roomUpdate/RoomPicture.vue' // 房型图片
import RoomFacilities from '@/components/room/roomUpdate/roomFacilities.vue' // 房型基础设施
import { getRoomInfo } from '@/public/js/room.js'
const RoomInfo = () => import('@/components/room/roomUpdate/roomInfo.vue')
export default {
  components: {
    RoomInfo,
    RoomPicture,
    RoomFacilities
  },
  token: '',
  data () {
    return {
      activeName: 'first',
      hotelName: '',
      hotelEnName: '',
      content: {
        firstTitle: '酒店管理',
        secondTitle: '房型信息',
        type: 'close'
      }
    }
  },
  created () {
    this.getRoomInfoData()
    this.activeName = sessionStorage.getItem('TabName')
    // 缓存是否为新建 （ 0：新建 1：修改）
    sessionStorage.setItem('isCreate', true)
  },
  watch: {
    // 本地存储 tab状态
    activeName (val) {
      sessionStorage.setItem('TabName', val)
    }
  },
  methods: {
    // tab控制
    isClick (tabIndex) {
      if (this.activeName === tabIndex) {
        return true
      } else {
        return false
      }
    },
    // 获取房型所有信息
    getRoomInfoData () {
      let data = {
        'timestamp': 0,
        'version': 'string',
        'operation': 'string',
        'hotelId': this.$route.query.hotelId
      }
      getRoomInfo(data).then(res => {
        console.log('res', res)
        if (!res.data.errCode) {
          this.hotelName = res.data.hotelName
          this.hotelEnName = res.data.hotelEnName
        }
      })
    }
  }
}
</script>
<style lang="scss">
.el-tabs__content{
  margin-top:30px;
}
.el-form .information-btn {
  margin-left: -20px;
  padding: 8px 0px 8px 30px;
}
.roomUpdate-content {
  background-color: white;
  padding:0 20px;
  position: relative;
  /*头部切换导航样式*/
  .el-tabs__item {
    height: 74px;
    line-height: 74px;
  }
  .el-tabs__item.is-active {
    color: #45a2ff;
  }
  .el-tabs__item:hover {
    color: #45a2ff;
  }
  .el-tabs__item.is-disabled{
    color:#999;
  }
}
</style>
